<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./css/index.css">
		<link rel="stylesheet" href="./css/tabler.min.css">

		<script src="./js/jquery.min.js"></script>
		<script src="./js/jquery.blockUI.min.js"></script>
		<script src="./js/tabler.min.js"></script>
	</head>
	<body>

		<input type="file" id="file-upload" style="display: none;">
		<input type="file" id="file-goods-upload" style="display: none;">

		<div id="legends" style="position: fixed;top: 5%;right: 2%;z-index: 2;"></div>


		<!-- 模态框 -->
		<div class="modal modal-blur fade" id="edit-modal" tabindex="-1" style="display: none;" aria-modal="true"
			role="dialog">
			<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title">编辑货物信息</h5>
						<button id="edit-good-close-btn" type="button" class="btn-close" data-bs-dismiss="modal"
							aria-label="Close"></button>
					</div>
					<div class="modal-body">

						<div class="row">

							<div class="col-2">
								<div class="mb-3">
									<label for="edit-good-type" class="form-label">货物类型</label>
									<select name="" id="edit-good-type"
										class="form-control form-select heavy-foam-ratio-item">
										<option value="0">纸箱</option>
										<option value="1">木箱</option>
										<option value="2">托盘</option>
										<option value="3">盘具</option>
										<!-- <option value="-1">其他</option> -->
									</select>
								</div>
							</div>

							<div class="col-2">
								<div class="mb-3">
									<label for="edit-good-length" class="form-label" id="edit-label-length">长度</label>
									<input id="edit-good-length" type="number" min="1" value="11" step="1"
										class="form-control heavy-foam-ratio-item">
								</div>
							</div>

							<div class="col-2">
								<div class="mb-3">
									<label for="edit-good-width" class="form-label" id="edit-label-width">宽度</label>
									<input id="edit-good-width" type="number" min="1" value="9" step="1"
										class="form-control heavy-foam-ratio-item">
								</div>
							</div>

							<div id="height-col" class="col-2">
								<div class="mb-3">
									<label for="edit-good-height" class="form-label">高度</label>
									<input id="edit-good-height" type="number" min="1" value="9" step="1"
										class="form-control heavy-foam-ratio-item">
								</div>
							</div>

							<div class="col-2">
								<div class="mb-3">
									<label for="edit-good-weight" class="form-label">重量</label>
									<input id="edit-good-weight" type="number" min="1" value="200" step="1"
										class="form-control heavy-foam-ratio-item">
								</div>
							</div>

							<div class="col-2">
								<div class="mb-3">
									<label for="edit-good-number" class="form-label">数量</label>
									<input id="edit-good-number" type="number" min="1" value="1" step="1"
										class="form-control">
								</div>
							</div>

							<div class="col-4"></div>
							<div class="col-4">
								<span>重泡比为<strong id="heavy-foam-ratio-text">220</strong></span>
							</div>

						</div>

					</div>
					<div class="modal-footer">
						<button id="edit-good-cancel-btn" type="button" class="btn me-auto"
							data-bs-dismiss="modal">取消</button>
						<!-- <svg t="1700702221762" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10050" width="200" height="200"><path d="M512 177.8c45.1 0 88.9 8.8 130.1 26.2 39.8 16.8 75.5 40.9 106.2 71.6 30.7 30.7 54.8 66.4 71.6 106.2 17.4 41.2 26.2 84.9 26.2 130.1s-8.8 88.9-26.2 130.1c-16.8 39.8-40.9 75.5-71.6 106.2-30.7 30.7-66.4 54.8-106.2 71.6C600.9 837.2 557.2 846 512 846s-88.9-8.8-130.1-26.2c-39.8-16.8-75.5-40.9-106.2-71.6-30.7-30.7-54.8-66.4-71.6-106.2-17.4-41.2-26.2-84.9-26.2-130.1s8.8-88.9 26.2-130.1c16.8-39.8 40.9-75.5 71.6-106.2s66.4-54.8 106.2-71.6c41.2-17.3 85-26.2 130.1-26.2m0-50c-212.2 0-384.2 172-384.2 384.2s172 384.2 384.2 384.2 384.2-172 384.2-384.2-172-384.2-384.2-384.2z" p-id="10051" fill="#1296db"></path><path d="M688.1 622.3L568.6 509.1 684 402.3l-49.7-61.8-123.2 114-118.4-112.1-50.3 61.2 110.5 104.7-117 108.4 49.6 61.8 125-115.6 127.3 120.6z" p-id="10052" fill="#1296db"></path></svg> -->
						<button id="edit-good-enter-btn" type="button" class="btn btn-primary"
							data-bs-dismiss="modal">确定</button>
					</div>
				</div>
			</div>
		</div>

		<!-- 模态框：展示路线信息 -->
		<div class="modal modal-blur fade" id="view-modal" tabindex="-1" style="display: none;" aria-modal="true"
			role="dialog">
			<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title">路线信息</h5>
						<button id="view-close-btn" type="button" class="btn-close" data-bs-dismiss="modal"
							aria-label="Close"></button>
					</div>
					<div class="modal-body">

						<div class="table-responsive" style="max-height: 300px;">
							<table class="table table-vcenter card-table table-striped">
								<thead>
									<tr>
										<th>线路</th>
										<th>车厢长</th>
										<th>车厢宽</th>
										<th>车厢高</th>
										<th>价格</th>
										<th>最大载荷(千克)</th>
									</tr>
								</thead>
								<tbody id="view-route-tablebody"></tbody>
							</table>
						</div>

					</div>
					<div class="modal-footer">
						<button id="view-cancel-btn" type="button" class="btn me-auto"
							data-bs-dismiss="modal">取消</button>
						<!-- <svg t="1700702221762" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10050" width="200" height="200"><path d="M512 177.8c45.1 0 88.9 8.8 130.1 26.2 39.8 16.8 75.5 40.9 106.2 71.6 30.7 30.7 54.8 66.4 71.6 106.2 17.4 41.2 26.2 84.9 26.2 130.1s-8.8 88.9-26.2 130.1c-16.8 39.8-40.9 75.5-71.6 106.2-30.7 30.7-66.4 54.8-106.2 71.6C600.9 837.2 557.2 846 512 846s-88.9-8.8-130.1-26.2c-39.8-16.8-75.5-40.9-106.2-71.6-30.7-30.7-54.8-66.4-71.6-106.2-17.4-41.2-26.2-84.9-26.2-130.1s8.8-88.9 26.2-130.1c16.8-39.8 40.9-75.5 71.6-106.2s66.4-54.8 106.2-71.6c41.2-17.3 85-26.2 130.1-26.2m0-50c-212.2 0-384.2 172-384.2 384.2s172 384.2 384.2 384.2 384.2-172 384.2-384.2-172-384.2-384.2-384.2z" p-id="10051" fill="#1296db"></path><path d="M688.1 622.3L568.6 509.1 684 402.3l-49.7-61.8-123.2 114-118.4-112.1-50.3 61.2 110.5 104.7-117 108.4 49.6 61.8 125-115.6 127.3 120.6z" p-id="10052" fill="#1296db"></path></svg> -->
						<button id="view-enter-btn" type="button" class="btn btn-primary"
							data-bs-dismiss="modal">确定</button>
					</div>
				</div>
			</div>
		</div>

		<!-- 模态框：CheckList -->
		<div class="modal modal-blur fade" id="check-modal" tabindex="-1" style="display: none;" aria-modal="true"
			role="dialog">
			<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
				<div class="modal-content" id="check-modal-content">

				</div>
			</div>
		</div>


		<!-- 配置参数界面的模态框 -->
		<div class="modal modal-blur fade show" id="modal-config" tabindex="-1" style="display: none;" aria-modal="true"
			role="dialog">
			<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title">参数配置</h5>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body card">
						<div class="card-header">
							<ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs" role="tablist">
								<li class="nav-item" role="presentation">
									<a href="#tabs-paperBox-3" class="nav-link active" data-bs-toggle="tab"
										aria-selected="true" role="tab">
										<svg xmlns="http://www.w3.org/2000/svg"
											class="icon icon-tabler icon-tabler-package" width="24" height="24"
											viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
											stroke-linecap="round" stroke-linejoin="round">
											<path stroke="none" d="M0 0h24v24H0z" fill="none" />
											<path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" />
											<path d="M12 12l8 -4.5" />
											<path d="M12 12l0 9" />
											<path d="M12 12l-8 -4.5" />
											<path d="M16 5.25l-8 4.5" />
										</svg>
										纸箱
									</a>
								</li>
								<li class="nav-item" role="presentation">
									<a href="#tabs-tray-3" class="nav-link" data-bs-toggle="tab" aria-selected="false"
										role="tab" tabindex="-1">
										<svg xmlns="http://www.w3.org/2000/svg"
											class="icon icon-tabler icon-tabler-truck-loading" width="24" height="24"
											viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
											stroke-linecap="round" stroke-linejoin="round">
											<path stroke="none" d="M0 0h24v24H0z" fill="none" />
											<path d="M2 3h1a2 2 0 0 1 2 2v10a2 2 0 0 0 2 2h15" />
											<path
												d="M9 6m0 3a3 3 0 0 1 3 -3h4a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-4a3 3 0 0 1 -3 -3z" />
											<path d="M9 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
											<path d="M18 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
										</svg>
										托盘
									</a>
								</li>
								<li class="nav-item" role="presentation">
									<a href="#tabs-woodenBox-3" class="nav-link" data-bs-toggle="tab"
										aria-selected="false" role="tab" tabindex="-1">
										<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-box"
											width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
											stroke="currentColor" fill="none" stroke-linecap="round"
											stroke-linejoin="round">
											<path stroke="none" d="M0 0h24v24H0z" fill="none" />
											<path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" />
											<path d="M12 12l8 -4.5" />
											<path d="M12 12l0 9" />
											<path d="M12 12l-8 -4.5" />
										</svg>
										木箱
									</a>
								</li>
								<li class="nav-item" role="presentation">
									<a href="#tabs-dish-3" class="nav-link" data-bs-toggle="tab" aria-selected="false"
										role="tab" tabindex="-1">
										<svg xmlns="http://www.w3.org/2000/svg"
											class="icon icon-tabler icon-tabler-lifebuoy" width="24" height="24"
											viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
											stroke-linecap="round" stroke-linejoin="round">
											<path stroke="none" d="M0 0h24v24H0z" fill="none" />
											<path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />
											<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
											<path d="M15 15l3.35 3.35" />
											<path d="M9 15l-3.35 3.35" />
											<path d="M5.65 5.65l3.35 3.35" />
											<path d="M18.35 5.65l-3.35 3.35" />
										</svg>
										盘具
									</a>
								</li>
								<li class="nav-item" role="presentation">
									<a href="#tabs-general-3" class="nav-link" data-bs-toggle="tab"
										aria-selected="false" role="tab" tabindex="-1">
										<svg xmlns="http://www.w3.org/2000/svg"
											class="icon icon-tabler icon-tabler-truck-delivery" width="24" height="24"
											viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
											stroke-linecap="round" stroke-linejoin="round">
											<path stroke="none" d="M0 0h24v24H0z" fill="none" />
											<path d="M7 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
											<path d="M17 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
											<path d="M5 17h-2v-4m-1 -8h11v12m-4 0h6m4 0h2v-6h-8m0 -5h5l3 5" />
											<path d="M3 9l4 0" />
										</svg>
										通用
									</a>
								</li>
							</ul>
						</div>
						<div class="card-body">
							<div class="tab-content">
								<!-- 纸箱配置项 -->
								<div class="tab-pane active show" id="tabs-paperBox-3" role="tabpanel">
									<h3>纸箱配置项</h3>
									<div class="mb-3">
										<label class="form-label">重泡比</label>
										<input type="number" class="form-control" name="weight_foam_rate" placeholder=""
											value="330" min="0">
										<small class="form-hint">用于判断是否为重货或者泡货</small>
									</div>

									<div class="mb-3">
										<label class="form-label">运单体积占比(%)</label>
										<input type="number" class="form-control" name="volume_rate" placeholder=""
											value="90" min="0" max="100" step="5">
										<small class="form-hint">用于计算可运的运单总体积</small>
									</div>
								</div>

								<!-- 托盘配置项 -->
								<div class="tab-pane" id="tabs-tray-3" role="tabpanel">
									<h3>托盘配置项</h3>
									<div class="mb-3">
										<label class="form-label">重泡比</label>
										<input type="number" class="form-control" name="weight_foam_rate" placeholder=""
											value="330" min="0">
										<small class="form-hint">用于判断是否为重货或者泡货</small>
									</div>

									<div class="mb-3">
										<div class="row row-cards">
											<div class="col-md-6">
												<div class="mb-3">
													<label class="form-label">托盘可堆叠的最小长*宽(单位: m<sup>2</sup>)</label>
													<input type="number" class="form-control" name="tray_area"
														placeholder="" value="0.6" min="0">
													<small class="form-hint">单个托盘长*宽&gt;该数值可堆叠</small>
												</div>
											</div>
											<div class="col-md-6">
												<div class="mb-3">
													<label class="form-label">托盘可堆叠的最大重量(单位: kg)</label>
													<input type="number" class="form-control" name="tray_weight_max"
														placeholder="" value="600" min="'0">
													<small class="form-hint">单个托盘重量&lt;该数值可堆叠</small>
												</div>
											</div>
										</div>
									</div>

									<div class="mb-3">
										<div class="row row-cards">
											<div class="col-md-6">
												<div class="mb-3">
													<label class="form-label">托盘可被堆叠的最小重量(单位: kg)</label>
													<input type="number" class="form-control" name="tray_weight_min"
														placeholder="" value="100" min="0">
													<small class="form-hint">单个托盘重量≤该数值不能被堆叠</small>
												</div>
											</div>
											<div class="col-md-6">
												<div class="mb-3">
													<label class="form-label">堆叠层的总重量阈值(单位: kg)</label>
													<input type="number" class="form-control" name="total_weight"
														placeholder="" value="600" min="0">
													<small class="form-hint">堆叠层的总重量≤min(最下层单个托盘的重量, 该数值)</small>
												</div>
											</div>
										</div>

									</div>
								</div>

								<!-- 木箱配置项 -->
								<div class="tab-pane" id="tabs-woodenBox-3" role="tabpanel">
									<h3>木箱配置项</h3>
									<div class="mb-3">
										<label class="form-label">重泡比</label>
										<input type="number" class="form-control" name="weight_foam_rate" placeholder=""
											value="330" min="0">
										<small class="form-hint">用于判断是否为重货或者泡货</small>
									</div>

									<div class="mb-3">
										<label class="form-label">木箱可被堆叠的最小重量阈值(单位: kg)</label>
										<input type="number" class="form-control" name="box_weight" placeholder=""
											value="60" min="0">
										<small class="form-hint">≤该数值的木箱不能被堆叠</small>
									</div>

									<div class="mb-3">
										<div class="row row-cards">
											<div class="col-md-6">
												<div class="mb-3">
													<label class="form-label">三层重货承重范围(单位: kg)</label>
													<div class="input-group mb-2">
														<span class="input-group-text">&lt;=</span>
														<input type="number" class="form-control"
															name="third_box_weight" placeholder="" autocomplete="off"
															value="600">
													</div>
													<small class="form-hint">用于判断是否可以进行三层堆叠</small>
												</div>
											</div>
											<div class="col-sm-6 col-md-6">
												<div class="mb-3">
													<label class="form-label">两层重货承重范围(单位: kg)</label>
													<div class="input-group">
														<input type="number" class="form-control"
															name="second_box_weight_1" placeholder="" autocomplete="off"
															value="600">
														<span class="input-group-text">~</span>
														<input type="number" class="form-control"
															name="second_box_weight_2" placeholder="" autocomplete="off"
															value="1200">
													</div>
													<small class="form-hint">用于判断是否可以进行两层堆叠</small>
												</div>
											</div>
										</div>
									</div>

									<div class="mb-3">
										<label class="form-label">堆叠层的总重量阈值(单位: kg)</label>
										<input type="number" class="form-control" name="total_weight" placeholder=""
											value="1200" min="0">
										<small class="form-hint">堆叠层的总重量≤min(最下层单个托盘的重量, 该数值)</small>
									</div>
								</div>

								<!-- 盘具配置项 -->
								<div class="tab-pane" id="tabs-dish-3" role="tabpanel">
									<h3>盘具配置项</h3>
									<div class="mb-3">
										<label class="form-label">重泡比</label>
										<input type="number" class="form-control" id="weight-foam-rate"
											name="weight_foam_rate" placeholder="" value="330">
										<small class="form-hint">用于判断是否为重货或者泡货</small>
									</div>

									<div class="mb-3">
										<label class="form-label">盘具可堆叠的最大盘径阈值(单位: mm)</label>
										<input type="number" class="form-control" name="dish_radius" placeholder=""
											value="700" min="0">
										<small class="form-hint">盘径≤该数值可堆叠</small>
									</div>

									<div class="mb-3">
										<div class="row row-cards">
											<div class="col-md-4">
												<div class="mb-3">
													<label class="form-label">三层堆码盘径范围(单位: mm)</label>
													<div class="input-group mb-2">
														<span class="input-group-text">&lt;=</span>
														<input type="number" class="form-control"
															name="third_dish_radius" placeholder="" autocomplete="off"
															value="400">
													</div>
													<small class="form-hint"
														name="weight-threshold-message">用于判断是否可以进行三层堆叠</small>
												</div>
											</div>
											<div class="col-md-4">
												<div class="mb-3">
													<label class="form-label">两层堆码盘径范围(单位: mm)</label>
													<div class="input-group">
														<input type="number" class="form-control"
															name="second_dish_radius_1" placeholder=""
															autocomplete="off" value="400">
														<span class="input-group-text">~</span>
														<input type="number" class="form-control"
															name="second_dish_radius_2" placeholder=""
															autocomplete="off" value="700">
													</div>
													<small class="form-hint"
														name="weight-threshold-message">用于判断是否可以进行两层堆叠</small>
												</div>
											</div>
											<div class="col-md-4">
												<div class="mb-3">
													<label class="form-label">一层堆码盘径范围(单位: mm)</label>
													<div class="input-group mb-2">
														<span class="input-group-text">&gt;</span>
														<input type="number" class="form-control"
															name="first_dish_radius" placeholder="" autocomplete="off"
															value="700">
													</div>
													<small class="form-hint"
														name="weight-threshold-message">用于判断是否可以进行一层堆叠</small>
												</div>
											</div>
										</div>
									</div>
								</div>

								<!-- 通用货物配置项 -->
								<div class="tab-pane" id="tabs-general-3" role="tabpanel">
									<h3>通用货物配置项</h3>
									<div class="mb-3">
										<label class="form-label">重泡比</label>
										<input type="number" class="form-control" name="weight_foam_rate" placeholder=""
											value="330">
										<small class="form-hint">用于判断是否为重货或者泡货</small>
									</div>

									<div class="mb-3">
										<label class="form-label">堆叠顺序(由下到上的顺序依次为)</label>
										<select name="stack_sequence" class="form-select">
											<option selected="selected" value="木箱_托盘_纸箱">木箱-托盘-纸箱</option>
										</select>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<a href="#" class="btn btn-primary ms-secondary" id="reset" data-bs-dismiss="modal">
							恢复默认值
						</a>
						<a href="#" class="btn btn-primary ms-auto" id="confirm" data-bs-dismiss="modal">
							确认
						</a>
					</div>
				</div>
			</div>
		</div>


		<div class="page" style="height: 100%;">
			<header class="navbar navbar-expand-md d-print-none">
				<div style="display: flex;width:100%; center;align-items: center;">
					<span style="font-size: 30px; margin-left: 10px;font-weight: bold;">三维货物装箱算法可视化页面</span>
				</div>
			</header>

			<div class="page-body" style="height: 85%;">
				<div class="container-fluid" style="height: 100%;">
					<div class="row row-cards" style="height: 100%;">

						<!-- 1. 左边的控制面板 -->
						<div class="col-4">

							<!-- 1.1 编辑货物数据 -->
							<div class="card">

								<div class="col-6" style="margin-left: 5%;margin-bottom: 2%; margin-top: 2%;">
									<div class="form-label">
										<h5 style="margin-left: -10px; display: inline;">选择路线</h5>

										<svg style="cursor: pointer;" id="svg-view" t="1703580974907" class="icon"
											viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
											p-id="3643" width="200" height="200">
											<path
												d="M928.842245 512.091074c0-5.006014-0.846274-9.193383-1.086751-9.691733-0.182149-2.480494-1.028423-7.001461-1.815345-9.374508-0.210801-0.590448-0.484024-1.209548-0.724501-1.799996-0.424672-1.360997-0.876973-2.691295-1.390673-3.749394-76.871785-168.137395-242.376213-281.144168-411.782507-281.144168-169.375595 0-334.865697 112.902396-411.388535 280.130072-0.921999 1.815345-1.572822 3.553942-1.981121 5.066389-0.181125 0.49835-0.39295 0.967024-0.558725 1.406023-1.512447 4.430916-1.542122 7.514137-1.421372 6.712889-0.710175 3.251044-1.360997 9.722432-1.360997 9.722432-0.181125 1.949398-0.181125 3.50687 0.030699 5.442966 0 0 0.649799 5.65479 0.968048 6.80294 0.090051 1.602498 0.483001 3.931542 0.951675 6.048763l-0.030699 0c0.408299 1.814322 0.968048 3.568269 1.738597 5.291516 0.393973 1.330298 0.862647 2.570545 1.270946 3.507894 76.976162 168.166047 242.436588 281.20352 411.781484 281.20352 169.436994 0 334.941422-112.945375 410.936233-279.328823 1.177825-2.177596 1.935072-4.233418 2.448772-6.018064 0.2415-0.543376 0.454348-1.027399 0.604774-1.511423 1.331321-3.872191 1.602498-7.227612 1.481747-7.227612l-0.028653 0.029676C928.027693 520.921183 928.842245 516.89959 928.842245 512.091074zM872.717993 514.146896c-0.029676 0.121773-0.091074 0.272199-0.151449 0.393973-0.090051 0.36225-0.240477 0.785899-0.332575 1.209548-68.403926 147.420561-212.830293 246.337431-360.191502 246.337431-146.997935 0-291.168476-98.642624-360.252901-246.578931-0.166799-0.5137-0.287549-0.998747-0.468674-1.481747-0.030699-0.484024-0.12075-0.876973-0.150426-1.150196-0.060375-0.300852-0.12075-0.724501-0.166799-1.088798l0-0.3776c0.166799-0.620124 0.286526-1.239224 0.347924-1.919722 0.12075-0.36225 0.211824-0.710175 0.347924-1.103124C220.132094 360.89042 364.680235 261.928524 512.041444 261.928524c147.420561 0 291.940049 99.051947 360.161826 246.322082 0.060375 0.287549 0.121773 0.530073 0.212848 0.726547 0.060375 0.2415 0.119727 0.484024 0.240477 0.740874 0.151449 1.104147 0.272199 2.192945 0.423649 2.736321C872.899118 513.028423 872.809067 513.572822 872.717993 514.146896z"
												fill="#1afa29" p-id="3644"></path>
											<path
												d="M512.041444 373.060601c-76.598562 0-138.954749 62.325487-138.954749 138.939399 0 76.598562 62.356187 138.954749 138.954749 138.954749 76.598562 0 138.954749-62.356187 138.954749-138.954749C650.996193 435.386088 588.640006 373.060601 512.041444 373.060601zM512.041444 595.372849c-45.935192 0-83.371826-37.406958-83.371826-83.371826 0-45.950542 37.436634-83.356476 83.371826-83.356476 45.964868 0 83.373873 37.406958 83.373873 83.356476C595.414293 557.965891 558.006312 595.372849 512.041444 595.372849z"
												fill="#1afa29" p-id="3645"></path>
										</svg>

										<svg style="cursor: pointer;" id="svg-import" t="1703580866845" class="icon"
											viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
											p-id="1473" width="200" height="200">
											<path d="M128 128l768 0 0 64-768 0 0-64Z" p-id="1474" fill="#1296db"></path>
											<path d="M128 768l768 0 0 128-768 0 0-128Z" p-id="1475" fill="#1296db">
											</path>
											<path
												d="M512 691.2 512 691.2c19.2 0 32-12.8 32-32L544 352l83.2 83.2C640 448 659.2 448 665.6 435.2l6.4-6.4c12.8-12.8 12.8-25.6 0-38.4L537.6 256C531.2 249.6 524.8 243.2 512 243.2l0 0C499.2 243.2 492.8 249.6 486.4 256L352 390.4c-12.8 12.8-12.8 25.6 0 38.4l6.4 6.4C364.8 448 384 448 396.8 435.2l83.2-83.2 0 307.2C480 672 492.8 691.2 512 691.2z"
												p-id="1476" fill="#1296db"></path>
										</svg>

										<svg style="cursor: pointer;" id="svg-export" t="1703647110347" class="icon"
											viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
											p-id="5106" width="200" height="200">
											<path
												d="M83.5 353.2S293.3 318 424.6 483.9c-69.8 70-113.5 113.8-113.5 113.8L634.5 571l17.1-314.8-104.8 105.1s-192.6-227-463.3-8.1z"
												fill="#1afa29" p-id="5107"></path>
											<path
												d="M932.1 927.6H140.8c-10.4 0-18.8-8.4-18.8-18.8V513.2c0-10.4 8.4-18.8 18.8-18.8s18.8 8.4 18.8 18.8V890h753.7V136.3H544.1c-10.4 0-18.8-8.4-18.8-18.8s8.4-18.8 18.8-18.8h388c10.4 0 18.8 8.4 18.8 18.8v791.3c0 10.4-8.4 18.8-18.8 18.8z"
												fill="#1afa29" p-id="5108"></path>
											<path
												d="M311.1 616.5c-7.3 0-14-4.2-17.1-10.9-3.3-7.1-1.8-15.6 3.7-21.2l101.4-101.7c-123-140.3-310.6-111.2-312.6-111-8.4 1.4-16.7-3.1-20.2-10.9-3.5-7.8-1.3-16.9 5.3-22.3 212.2-171.5 395.9-84.7 475.7-4.4l90.9-91.2c5.5-5.5 13.9-7.1 21-3.9 7.1 3.2 11.5 10.4 11.1 18.2L653.2 572c-0.5 9.4-7.9 17-17.2 17.7l-323.4 26.6c-0.5 0.2-1 0.2-1.5 0.2zM146.3 331.3c75.9 2.2 201.7 25.4 293.1 141 5.9 7.5 5.3 18.2-1.4 25l-77.4 77.6 256.1-21.1 13.5-249.3-70 70.2c-3.7 3.7-9.1 5.5-14 5.5-5.2-0.2-10.2-2.6-13.6-6.6-6.9-8.2-160.9-183.4-386.3-42.3z"
												fill="#1afa29" p-id="5109"></path>
										</svg>

									</div>
									<select class="form-select" id="route-select" style="display: inline;">
									</select>
								</div>

								<div class="card-header">
									<!-- <h3>编辑货物信息</h3> -->
									<ul class="nav nav-tabs card-header-tabs">
										<span style="font-size: 15px; font-weight: bold;">
											待装箱货物
											<svg style="cursor: pointer;" id="svg-goods-import" t="1703580866845"
												class="icon" viewBox="0 0 1024 1024" version="1.1"
												xmlns="http://www.w3.org/2000/svg" p-id="1473" width="200" height="200">
												<path d="M128 128l768 0 0 64-768 0 0-64Z" p-id="1474" fill="#1296db">
												</path>
												<path d="M128 768l768 0 0 128-768 0 0-128Z" p-id="1475" fill="#1296db">
												</path>
												<path
													d="M512 691.2 512 691.2c19.2 0 32-12.8 32-32L544 352l83.2 83.2C640 448 659.2 448 665.6 435.2l6.4-6.4c12.8-12.8 12.8-25.6 0-38.4L537.6 256C531.2 249.6 524.8 243.2 512 243.2l0 0C499.2 243.2 492.8 249.6 486.4 256L352 390.4c-12.8 12.8-12.8 25.6 0 38.4l6.4 6.4C364.8 448 384 448 396.8 435.2l83.2-83.2 0 307.2C480 672 492.8 691.2 512 691.2z"
													p-id="1476" fill="#1296db"></path>
											</svg>

										</span>

										<li class="nav-item ms-auto" id="setting-btn" style="cursor: pointer;">
											<!-- add good button -->
											设置
											<svg t="1701311562281" class="icon" viewBox="0 0 1024 1024" version="1.1"
												xmlns="http://www.w3.org/2000/svg" p-id="4249" width="200" height="200">
												<path
													d="M482.88 112l-17.28 90.688-20.64 4.512a309.696 309.696 0 0 0-99.776 41.088l-18.688 11.84-73.28-55.04-44.64 44.64 51.904 76.416-11.392 17.76a310.016 310.016 0 0 0-41.568 99.584l-4.8 21.6-90.72 12.896v63.104l90.688 17.312 4.512 20.64a309.984 309.984 0 0 0 41.088 99.776l11.84 18.688-55.04 73.28 44.64 44.64 76.416-51.904 17.76 11.392a310.016 310.016 0 0 0 99.584 41.568l21.6 4.8 12.896 90.72h63.104l17.312-90.688 20.64-4.512a309.984 309.984 0 0 0 99.776-41.088l18.688-11.84 73.28 55.04 44.64-44.64-51.904-76.416 11.392-17.76a310.016 310.016 0 0 0 41.568-99.584l4.8-21.6 90.72-12.896V482.88l-90.688-17.312-4.512-20.64a309.984 309.984 0 0 0-41.088-99.776l-11.84-18.688 55.04-73.28-44.64-44.64-76.416 51.904-17.76-11.392a310.144 310.144 0 0 0-99.584-41.568l-21.6-4.8-12.896-90.72H482.88zM410.56 149.856l19.424-101.856h171.584l14.624 102.624c28 8.064 54.848 19.328 80.128 33.568l85.792-58.304 121.344 121.344-62.272 82.88c14.08 25.408 25.152 52.352 32.96 80.416l101.888 19.424v171.584l-102.624 14.624a373.92 373.92 0 0 1-33.568 80.128l58.304 85.792-121.344 121.344-82.88-62.272c-25.408 14.08-52.352 25.152-80.416 32.96l-19.424 101.888h-171.584l-14.624-102.624a373.92 373.92 0 0 1-80.128-33.568L241.92 898.112l-121.344-121.344 62.272-82.88a373.824 373.824 0 0 1-32.96-80.416L48 594.048v-171.584l102.624-14.624c8.064-27.968 19.328-54.848 33.568-80.128L125.888 241.92l121.344-121.344 82.88 62.272a373.856 373.856 0 0 1 80.416-32.96z"
													fill="#000000" p-id="4250"></path>
												<path
													d="M512 704a192 192 0 1 1 0-384 192 192 0 0 1 0 384z m0-64a128 128 0 1 0 0-256 128 128 0 0 0 0 256z"
													fill="#000000" p-id="4251"></path>
											</svg>
										</li>

										<li class="nav-item ms-auto" id="add-good-btn" style="cursor: pointer;">
											<!-- add good button -->
											添加货物
											<svg t="1700793957007" class="icon" viewBox="0 0 1024 1024" version="1.1"
												xmlns="http://www.w3.org/2000/svg" p-id="1468" width="200" height="200">
												<path
													d="M696 480H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z"
													p-id="1469" fill="#1296db"></path>
												<path
													d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
													p-id="1470" fill="#1296db"></path>
											</svg>
										</li>

										<li id="celar-btn" class="nav-item ms-auto" style="cursor: pointer;">
											<!-- clear button -->
											全部删除
											<svg t="1700702111028" class="icon" viewBox="0 0 1024 1024" version="1.1"
												xmlns="http://www.w3.org/2000/svg" p-id="7799" width="200" height="200">
												<path
													d="M512 838.858c10.89 0 19.732-9.158 19.732-20.43v-490.275c0-11.273-8.842-20.43-19.732-20.43s-19.755 9.157-19.755 20.43v490.275c0 11.272 8.842 20.43 19.755 20.43M629.877 838.813c10.935 0.428 20.138-8.37 20.475-19.688l28.665-489.69c0.427-11.272-8.077-20.745-18.99-21.195-10.935-0.405-20.137 8.415-20.475 19.688l-28.665 489.713c-0.405 11.317 8.1 20.767 18.99 21.172M848.038 185.142h-197.708v-81.653c0-22.545-17.685-40.882-39.51-40.882h-197.64c-21.87 0-39.532 18.338-39.532 40.882v81.653h-197.685c-10.913 0-19.755 9.158-19.755 20.475 0 11.272 8.843 20.407 19.755 20.407h39.577l39.488 653.67c6.367 44.73 35.415 81.72 79.065 81.72h355.793c43.65 0 71.573-37.44 79.088-81.72l39.488-653.67h39.578c10.867 0 19.755-9.135 19.755-20.408 0-11.317-8.888-20.475-19.755-20.475M413.157 103.49h197.64v81.653h-197.64v-81.653zM729.418 879.695c-2.655 21.555-17.73 40.86-39.533 40.86h-355.793c-21.87 0-36.54-19.057-39.532-40.86l-39.532-653.67h513.945l-39.555 653.67zM394.145 838.858c10.89-0.473 19.373-9.9 18.99-21.195l-29.070-489.712c-0.427-11.273-9.585-20.070-20.475-19.665-10.913 0.428-19.463 9.9-19.013 21.173l29.093 489.712c0.36 11.295 9.54 20.070 20.475 19.688z"
													p-id="7800" fill="#d81e06"></path>
											</svg>
										</li>

									</ul>
								</div>
								<div class="card-body">

									<div class="table-responsive" style="max-height: 200px;overflow-y: scroll;">
										<table class="table mb-0">
											<thead>
												<tr>
													<th>货物种类</th>
													<th>货物尺寸(长,宽,高)</th>
													<th>货物重量</th>
													<th>货物数量</th>
													<th>重泡比</th>
													<th></th>
													<th></th>
												</tr>
											</thead>
											<tbody id="goods-table-body">
												<tr>
													<td>托盘</td>
													<td>(1000,1000,600)</td>
													<td>620</td>
													<td>2</td>
													<td><span class="badge bg-secondary-lt">泡货</span></td>
													<td><button class="btn btn-danger goods-delete"
															style="width:50px;height: 20px;">删除</button></td>
													<td><button class="btn btn-primary goods-edit"
															style="width:50px;height: 20px;">编辑</button></td>
												</tr>
												<tr>
													<td>托盘</td>
													<td>(1000,1000,1000)</td>
													<td>416</td>
													<td>32</td>
													<td><span class="badge bg-secondary-lt">泡货</span></td>
													<td><button class="btn btn-danger goods-delete"
															style="width:50px;height: 20px;">删除</button></td>
													<td><button class="btn btn-primary goods-edit"
															style="width:50px;height: 20px;">编辑</button></td>
												</tr>
												<tr>
													<td>托盘</td>
													<td>(1000,1000,800)</td>
													<td>315</td>
													<td>1</td>
													<td><span class="badge bg-secondary-lt">泡货</span></td>
													<td><button class="btn btn-danger goods-delete"
															style="width:50px;height: 20px;">删除</button></td>
													<td><button class="btn btn-primary goods-edit"
															style="width:50px;height: 20px;">编辑</button></td>
												</tr>
												<tr>
													<td>托盘</td>
													<td>(1000,1000,800)</td>
													<td>255</td>
													<td>1</td>
													<td><span class="badge bg-secondary-lt">泡货</span></td>
													<td><button class="btn btn-danger goods-delete"
															style="width:50px;height: 20px;">删除</button></td>
													<td><button class="btn btn-primary goods-edit"
															style="width:50px;height: 20px;">编辑</button></td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>

								<div class="card-footer"
									style="display: flex; align-items: center; justify-content: center;">
									<!-- enter button -->
									<button id="enter-btn" style="width: 80%; background: green;" type="submit"
										class="btn btn-primary">提交</button>
								</div>

								<div class="card-body">
									<h3 style="margin-top: 5px;">装箱方案</h3>
									<div class="table-responsive" style="max-height: 200px;overflow-y: scroll;">
										<table class="table mb-0">
											<thead>
												<tr>
													<th>编号</th>
													<th>货车类型</th>
													<th>价格</th>
													<th>空间利用率</th>
													<th>承重</th>
												</tr>
											</thead>
											<tbody id="pcaking-result-table-body"></tbody>
										</table>
									</div>
								</div>

								<div class="card-footer" id="progress-footer" style="display: none;">
									<p class="mb-3">车厢总体积为<strong id="total-volume">100升</strong>，耗费成本<strong
											id="total-cost"></strong></p>

									<div class="progress progress-separated mb-3">
										<div id="goods-volume" class="progress-bar bg-success" role="progressbar"
											style="width: 9%" aria-label="Shared"></div>
									</div>

									<div class="row">

										<div class="col-auto d-flex align-items-center px-2">
											<span class="legend me-2 bg-success"></span>
											<span>已分配</span>
											<span id="text-goods-volume"
												class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">201MB</span>
										</div>

										<div class="col-auto d-flex align-items-center ps-2">
											<span class="legend me-2"></span>
											<span>空闲</span>
											<span id="text-free-volume"
												class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">612MB</span>
										</div>

									</div>
								</div>


								<div class="card-footer" id="progress-footer-2" style="display: none;">
									<p class="mb-3">车厢最大承重为<strong id="total-weight">100千克</strong></p>

									<div class="progress progress-separated mb-3">
										<div id="goods-weight" class="progress-bar bg-success" role="progressbar"
											style="width: 9%" aria-label="Shared"></div>
									</div>

									<div class="row">

										<div class="col-auto d-flex align-items-center px-2">
											<span class="legend me-2 bg-success"></span>
											<span>已载重</span>
											<span id="text-goods-weight"
												class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">201MB</span>
										</div>

										<div class="col-auto d-flex align-items-center ps-2">
											<span class="legend me-2"></span>
											<span>还可载重</span>
											<span id="text-free-weight"
												class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">612MB</span>
										</div>

									</div>

								</div>

							</div>

						</div>

						<!-- 2. 右边的展示区域 -->
						<div class="col-8">

							<div class="row image_show" style="height: 50%;">
								<div class="col-5 img-div"><img alt=""></div>
								<div class="col-5 img-div"><img alt=""></div>
							</div>

							<div class="row image_show" style="height: 50%; margin-top: 10px;">
								<div class="col-5 img-div"><img alt=""></div>
								<div class="col-5 img-div"><img alt=""></div>
							</div>

							<div class="row plotly_show" style="height: 96%; margin-top: 2%; display: none;"></div>

							<div id="page-div" style="position: fixed; right: 3%; bottom: 10%"></div>

						</div>

					</div>
				</div>
			</div>

		</div>

		<div style="position: fixed; right: 20px; bottom: 20px;">
			<label class="form-check form-switch">
				<input class="form-check-input" type="checkbox" id="hot-switch">
				<span class="form-check-label">绘制热力图</span>
			</label>
		</div>

		<div style="position: fixed; right: 200px; bottom: 20px; display: none;">
			<label class="form-check form-switch">
				<input class="form-check-input" type="checkbox" id="image-type-switch">
				<span class="form-check-label">显示三维图</span>
			</label>
		</div>

		<div id="legend-div" style="position: fixed; top: 10%; right: 0%; display: none;">
			<img src="./icon/legend1.png" width="200px">
		</div>
		<div id="div-checklist" style="position: fixed; right: 8%; top: 55%;"></div>

	</body>

	<script src="./js/packing.js"></script>
	<script src="./js/index.js"></script>

</html>
